<template>
  <el-popover
  placement="bottom"
  width="400"
  trigger="hover">
  <div>
    <el-row>
        <el-col :span="24" v-for="(o, index) in $store.state.cart" :key="o">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <div style="float: left; margin-left: 10px; padding: 0px width: 110px;">
              <img
                :src="$store.state.CarImgAddress[index]"
                class="image"
                width="110px"
                height="110px"
              />
            </div>
            <div style="float: left;margin: 20px;width: 200px;">
                <div id="name">
                  {{ o.name }}
                </div>
                <div style="margin: 20px;width: 200px;">
                    <span id="price">￥{{ o.price }}</span>
                    <span id="num">x{{ o.num }}</span>
                </div>
            </div>
            <div style="float:left;margin-top: 40px;" @click="deleteGood(index)">
                <el-button type="text" class="button" @mouseenter="getCar"
                    ><i class="el-icon-circle-close"></i
                ></el-button>
            </div>
          </el-card>
        </el-col>
  </el-row>
  </div>
  <div>
    <div style="float:left">应付总额：{{$store.state.total}}</div>
    <div style="float:right;margin-top: 10px;">
      <el-button type="primary" @click="toCart">去购物车</el-button>
    </div>
  </div>
  <el-button slot="reference">
    <img src="../assets/img/购物车.png" width="25" height="25" id="img">
  </el-button>
</el-popover>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
    };
  },
  methods: {
    toCart(){
      this.$router.push('Cart')
    },
    //获取购物车信息，只有图片地址处理过
    //http://202.193.52.12:8080/cart/deleteById?userId=7a3ae031010a4358b500925941c6019c&cartId=29ade395dfd14162879e71ca901b389b
    deleteGood(index) {
      var cartId = this.$store.state.cart[index].cardid;
      this.data.deleteCar(cartId);
    }
  },
  mounted() {
    this.data.getCar();
  }
};
</script>
<style scoped>
.button {
  float: right;
  font-size: larger;
}
#img {
  margin: 0px;
}
.el-card {
  width: 400px;
  height: 120px;
  margin: 0px;
  border-radius: 10px;
  border-color: #c0c4cc;
}
#name {
  color: #729cf0;
  font-weight: 600;
  width: 200px;
}
#price {
  color: rgb(157, 20, 20);
  margin-top: 10px;
  font-size: medium;
  font-weight: bold;
}
#num {
  color: #729cf0;
  font-size: small;
  font-style: italic;
  font-weight: bold;
}

</style>